<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>借贷管理-待审核</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>借贷管理</el-breadcrumb-item>
                    <el-breadcrumb-item>待审核</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <div class="layout-page-box">
            <el-form :inline="true" label-width="80px" label-position="right" :model="filters" class="search-form">
                <el-form-item label="姓名">
                    <el-input v-model="filters.column.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="filters.column.mobile" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item label="身份证">
                    <el-input v-model="filters.column.id_card_no" placeholder="身份证"></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="filters.column.order_number" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="应还日期">
                    <el-date-picker
                            v-model="filters.column.deduct_date"
                            type="datetimerange"
                            align="right"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期范围"
                            range-separator="至"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search()"><i class="fa fa-search"></i>查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="layout-page-box">
            <el-table
                    :data="list"
                    border
                    @sort-change="sortChanged"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="user_name"
                        label="姓名"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号码"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="id_card_no"
                        label="身份证号码"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="借款金额(元)"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="loaned_amount"
                        label="放款金额(元)"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="duration"
                        label="借款周期(天)"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="deduct_date"
                        label="应还日期"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="sign_date"
                        label="协议日期"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="lender_name"
                        label="出借人"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="client_manager"
                        label="客户经理"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="repaid_amount"
                        label="已还金额(元)"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="delay_days"
                        label="已延期天数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="overdue_days"
                        label="逾期天数"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="通话详情"
                        align="center"
                        width="110">
                    <template slot-scope="scope">
                        <el-button @click="viewContact(scope.$index, scope.row)" type="default" size="small">
                            <i class="fa fa-eye"></i>通话详情
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                        width="200">
                    <template slot-scope="scope">
                        <el-button @click="repay(scope.$index, scope.row)" type="default" size="small">
                            <i class="fa fa-eye"></i>标记还款
                        </el-button>
                        <el-button @click="delay(scope.$index, scope.row)" type="primary" size="small">
                            <i class="fa fa-edit"></i>延期支付
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="pageChanged"
                    :current-page="filters.pagination.page"
                    :page-size="filters.pagination.limit"
                    layout="total, prev, pager, next, jumper"
                    :total="filters.pagination.total">
            </el-pagination>
        </div>
        <el-dialog
                title="延期信息"
                :visible.sync="delayDialogVisible"
                width="30%" style="min-width: 300px;">
            <el-form :inline="true" label-width="100px" label-position="right" :model="delayInfo" class="search-form">
                <el-form-item label="本次延期天数">
                    <el-input v-model="delayInfo.days" placeholder="本次延期天数"></el-input>
                </el-form-item>
                <el-form-item label="支付延期费">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-input v-model="delayInfo.fee" placeholder="支付延期费"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-button type="primary" @click="calc">系统计算</el-button>
                        </el-col>
                    </el-row>

                </el-form-item>
                <el-form-item label="延期支付时间">
                    <el-date-picker
                            v-model="delayInfo.pay_date"
                            type="datetime"
                            align="right"
                            format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="延期支付时间">
                    <el-radio-group v-model="delayInfo.method">
                        <el-radio :label="1">支付宝</el-radio>
                        <el-radio :label="2">微信</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delayDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doDelay">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="还款信息"
                :visible.sync="repayDialogVisible"
                width="30%" style="min-width: 300px;">
            <el-form :inline="true" label-width="100px" label-position="right" :model="delayInfo" class="search-form">
                <el-form-item label="已还金额">
                    <el-input v-model="loan.repaid_amount" placeholder="已还金额" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="应还金额">
                    <el-input v-model="loan.amount" placeholder="应还金额" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="应还本金">
                    <el-input v-model="loan.capital_fee" placeholder="应还本金" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="应还逾期费">
                    <el-input v-model="loan.overdue_fee" placeholder="应还逾期费" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="已延期天数">
                    <el-input v-model="loan.delay_days" placeholder="已延期天数" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="已延期费">
                    <el-input v-model="loan.delay_fee" placeholder="已延期费" readonly="true"></el-input>
                </el-form-item>
            </el-form>
            <div>点击确定后，将标记为已还款，请谨慎操作。</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="repayDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doRepay">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                filters: {
                    column: {
                        name: '',
                        mobile: '',
                        id_card_no: '',
                        order_number: '',
                        deduct_date: ''
                    },
                    pagination: {
                        page: 1,
                        limit: 10,
                        total: 0
                    },
                    order: ''
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                list: [
                    {
                        id: "",
                        user_name: "张三",
                        mobile: "13507315556",
                        id_card_no: "111123455667899",
                        amount: 1000,
                        duration: 7,
                        create_date: "2018-09-01 20:23:10",
                        client_manager: "xxxx"
                    }
                ],
                loan: {},
                delayInfo: {
                    pay_date: '',
                    days: 0,
                    fee: 0
                },
                dialogFormVisible: false,
                delayDialogVisible: false,
                repayDialogVisible: false
            }
        },
        methods: {
            search() {
                this.filters.pagination.page = 1
                this.refresh()
            },
            viewContact(index, row){

            },
            calc(){

            },
            delay(index, row) {
                this.delayDialogVisible = true
                this.loan = row
            },
            doDelay(){
                this.$confirm('确认延期吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    api.request('Akali/lr/markDelay', {
                        id: this.loan.id,
                        repaid_amount: this.delayInfo.fee,
                        delay_days: this.delayInfo.days,
                        pay_date: this.delayInfo.pay_date
                    }, 'POST').then((res) => {
                        this.delayDialogVisible = false;
                        this.$message({
                            type: 'success',
                            message: '续期成功!'
                        });
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                })
            },
            repay(index, row) {
                this.repayDialogVisible = true
                this.loan = row
            },
            doRepay(){
                this.$confirm('确认标记已还款吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    api.request('Akali/lr/markRepay', {
                        id: this.loan.id
                    }, 'POST').then((res) => {
                        this.repayDialogVisible = false;
                        this.$message({
                            type: 'success',
                            message: '还款成功!'
                        });
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                })
            },
            pageChanged(page) {
                this.filters.pagination.page = page
                this.refresh()
            },
            sortChanged(sort) {
                this.filters.order = _g.sortFilter(sort)
                this.refresh()
            },
            refresh(){
                router.push({
                    path: this.$route.path,
                    query: _.merge({}, this.$route.query, {__query: JSON.stringify(this.filters)}, {random: Math.random()})
                })
            },
            query(){
                var query = this.$route.query.__query
                if (query) {
                    Object.assign(this.filters, JSON.parse(query));
                }

                var start_date = ''
                var end_date = ''
                if (this.filters.column.deduct_date) {
                    var dates = this.filters.column.deduct_date;
                    if (dates instanceof Array) {
                        start_date = dates[0]
                        end_date = dates[1]
                    }
                }

                var queries = {
                    name: this.filters.column.name,
                    mobile: this.filters.column.mobile,
                    id_card_no: this.filters.column.id_card_no,
                    order_number: this.filters.column.order_number,
                    start_deduct_date: start_date,
                    end_deduct_date: end_date,
                    page: this.filters.pagination.page,
                    limit: this.filters.pagination.limit,
                    order: this.filters.order
                }

                api.request('Akali/lr/toRepayList', queries, 'POST').then((res) => {
                    this.list = res.data.list
                    this.filters.pagination.total = parseInt(res.data.total)
                });
            }
        },
        created() {
            this.query()
        },
        watch: {
            '$route' (to, from) {
                this.query()
            }
        }
    }
</script>

<style scoped>
    .el-input--suffix .el-input__inner{
        padding-right: 0px;
    }

    .el-dialog{
        min-width: 300px;
    }
</style>